<template>
  <!--   网络资产概览   -->
  <div class="container sp-flex">
    <div class="left flex">
      <div class="left_l">
        <img src="@/assets/images/img_internetSafe.png" alt="" />
        <p :title="data.title">{{ data.title }}</p>
      </div>
      <div class="left_r">
        <div>
          <div class="left_r_list flex" v-for="(i, index) in data.list">
            <span><img src="@/assets/images/icon-square.png" alt="" /></span>
            <span>{{ listTitle[index].title }}</span>
            <span class="font-blue">{{ i.value }}</span>
            <span v-if="listTitle[index].title == '测评状态'"
              ><i
                :class="[
                  i.value == '已过测' ? 'el-icon-success' : 'el-icon-error',
                ]"
              ></i
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import CycleComponent from '@/components/common/cycleComponent.vue';
export default {
  name: "internetList",
  components: {},
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      listTitle: [
        { title: "网络类型" },
        { title: "涉密等级" },
        { title: "防护等级" },
        { title: "测评状态" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100% !important;
  padding: 0.3rem 0 !important;
  .left {
    width: 100%;
    height: 100%;
    .left_l {
      margin-right:1rem;
      width: 30%;
      text-align: center;
      img {
        width: 66%;
      }
      p{
        max-height:36px;
        overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      word-break: break-all;
      }
    }
    .left_r {
      width: 70%;
      height: 100%;
      overflow: hidden;
      .left_r_list {
        text-align: left;
        padding: 0.2rem 0;
        span {
          &.font-blue {
            max-width: 60%;
            display: inline-block;
            white-space: nowrap;
            /* 设置文本不换行 */
            overflow: hidden;
            text-overflow: ellipsis;
          }
          margin-right: .6rem;
          .el-icon-success {
            color: #3abf81 !important;
          }
          .el-icon-error {
            color: #fe3535 !important;
          }
        }
      }
    }
  }
}
</style>
